<template>
  <div class="analysis">
    <el-button class="backBtn" type="primary" size="small" @click="$router.push('/index/projectmange')">返回</el-button>
    <p style="text-align: center;font-weight: bold;margin-top: 30px;font-size: 30px;">数据分析</p>
    <div
      ref="diagramsRef"
      style="width: 100%;height: 50vh; margin-top: 5vh;"
    >
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: ['projectInfo'],
  computed: {
    echartsData() {
      let data = []
      this.projectInfo.duration.forEach(item => {
        data.push({
          value: item.days,
          name: item.type,
          start_date: item.start_date,
          end_date: item.end_date
        })
      })
      return data
    }
  },
  mounted() {
    let timer = setInterval(() => {
      if (this.projectInfo.id) {
        clearInterval(timer)
        var myChart = echarts.init(this.$refs.diagramsRef)
        // 绘制图表
        myChart.setOption({
          title: {
            left: 'center',
            text: '各工序耗时占比分析图'
          },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              return `${params.data.name}：${params.data.value}天<br/>开始日期：${params.data.start_date}<br/>结束日期：${params.data.end_date}`
            },
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '各工序耗时占比',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'left'
              },
              labelLine: {
                show: false
              },
              data: this.echartsData
            }
          ]
        })
      }
    },100)

  }
}
</script>

<style scoped lang="less">
.analysis {
  box-sizing: border-box;
  position: absolute;
  left: 200px;
  top: 0;
  display: inline-block;
  width: 900px;
  padding: 20px;
  height: 90vh;
  .backBtn {
    position: absolute;
    right: 30px;
    top: 30px;
  }
}
@media screen and (max-width: 768px) {
  .analysis{
    left: 20vw;
  }
}
</style>
